<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-header">
        <h2>欢迎登录</h2>
        <p class="subtitle">答题系统</p>
      </div>
      <a-form :model="form" class="login-form" @submit="handleSubmit">
        <a-form-item field="userAccount" label="用户名" hide-label>
          <a-input
              v-model="form.userAccount"
              placeholder="请输入用户名"
              size="large"
          >
            <template #prefix>
              <icon-user/>
            </template>
          </a-input>
        </a-form-item>

        <a-form-item field="userPassword" label="密码" hide-label>
          <a-input-password
              v-model="form.userPassword"
              placeholder="请输入密码"
              size="large"
          >
            <template #prefix>
              <icon-lock/>
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item class="login-button-form">
          <div class="login-button">
            <a-button
                type="primary"
                html-type="submit"
                size="large"
                :loading="loading"
            >
              登录
            </a-button>
          </div>
        </a-form-item>

        <div class="login-actions">
          <a-link href="/user/register">注册</a-link>
          <a-link>忘记密码？</a-link>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {useLoginUserStore} from "@/store/userStore";
import {Message} from "@arco-design/web-vue";
import {useRouter} from "vue-router";
import * as logInController from "@/servers/api/logInController";

const router = useRouter();
const loginUser = useLoginUserStore();
import API from "@/servers/api/typings";

const form = reactive<API.UserLoginDTO>({});
const loading = ref(false);

const handleSubmit = async () => {
  if (!form.userAccount || !form.userPassword) {
    Message.warning({
      content: "请输入用户名和密码",
    });
    return;
  }

  loading.value = true;
  try {
    //登录
    const res = await logInController.login(form);
    if (res.data.code === 0) {
      //获取用户信息
      await loginUser.fetchLoginUser();
      Message.success({
        content: "登录成功",
        closable: true,
      });
      // 登录成功跳转页面
      router.push({
        path: "/",
        replace: true,
      });
    } else {
      Message.warning({
        content: res.data.msg,
      });
    }
  } catch (error) {
    Message.error({
      content: "登录失败，请稍后重试",
    });
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped lang="css">
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(
      135deg,
      var(--color-primary-light-4) 0%,
      var(--color-primary-light-1) 100%
  );
}

.login-content {
  width: 420px;
  padding: 40px;
  background: var(--color-bg-2);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.login-header {
  margin-bottom: 40px;
  text-align: center;
}

.login-header h2 {
  margin: 0;
  margin-bottom: 8px;
  color: var(--color-text-1);
  font-weight: 600;
  font-size: 28px;
}

.login-header .subtitle {
  margin: 0;
  color: var(--color-text-3);
  font-size: 16px;
}

.login-form {
  :deep(.arco-form-item) {
    margin-bottom: 24px;
  }

  :deep(.arco-input-wrapper) {
    background-color: var(--color-fill-2);
    border: 1px solid var(--color-neutral-3);
    transition: all 0.2s ease;

    &:hover {
      background-color: var(--color-fill-3);
      border-color: var(--color-primary-light-2);
    }

    &.arco-input-focus {
      background-color: var(--color-bg-2);
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px var(--color-primary-light-3);
    }
  }
}

.login-button-form {
  display: block;
  width: 100%;
}

.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.login-button :deep(.arco-btn) {
  min-width: 200px;
  height: 44px;
  font-size: 16px;
}

.login-button :deep(.arco-btn-primary) {
  min-width: 240px;
  background: linear-gradient(135deg, #4a90e2 0%, #007aff 100%);
  border: none;
  border-radius: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    background: linear-gradient(135deg, #5aa9f4 0%, #339aff 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }

  &:active {
    background: linear-gradient(135deg, #3a7bd5 0%, #0066cc 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

.login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

@media screen and (max-width: 480px) {
  .login-content {
    width: 90%;
    padding: 24px;
  }
}
</style>
